package com.example.myapplication.navigation

import com.example.myapplication.R
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.core.tween
import androidx.compose.animation.expandIn
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.slideInVertically
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.AccountBox
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.Face
import androidx.compose.material3.Button
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.material3.ModalBottomSheet
import androidx.compose.material3.SheetState
import androidx.compose.material3.Text
import androidx.compose.material3.rememberModalBottomSheetState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.MutableState
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import androidx.navigation.NavBackStackEntry
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.launch
import kotlin.Boolean

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun FloatActionButtonM3(
    fabState: MutableState<Boolean>,
    currentBackStack: NavBackStackEntry?,
    navigationToTopLevelDestination: (AppDestination) -> Unit
) {
    /**
     * isShowBottomSheet 这个布尔值决定是否要显示底部表单组件，而 sheetState 则负责管理这个组件显示出来后的状态和行为。两者需要协同工作，但不能互相替代。
     */
    //控制着点击floatActionButton之后是否显示底部的一个选择框
    val isShowBottomSheet = rememberSaveable { mutableStateOf(value = false) }
    //控制着底部选择框的显示状态，sheetState不仅仅是控制显隐，还负责动画、手势和中间状态（如部分展开）
    val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
    val scope = rememberCoroutineScope()

    AnimatedVisibility(
        visible = fabState.value,
        enter = fadeIn(animationSpec = tween(durationMillis = 50)),
        exit = fadeOut(targetAlpha = 0f),
        content = {
            FloatingActionButton(onClick = {
                when (currentBackStack?.destination?.route) {
                    AppRoute.CONTROL_MAIN -> {
                        isShowBottomSheet.value = true
                    }
                }
            }) {
                Icon(imageVector = Icons.Filled.Add, contentDescription = "Add")
                if (isShowBottomSheet.value) {
                    ModalBottomSheet(onDismissRequest = {
                        isShowBottomSheet.value = false
                    }, sheetState = sheetState) {
                        when (currentBackStack?.destination?.route) {
                            //这边显示控制主tab页面的bottom sheet
                            AppRoute.CONTROL_MAIN -> {
                                Column(
                                    modifier = Modifier
                                        .fillMaxWidth()
                                        .height(150.dp),
                                    horizontalAlignment = Alignment.CenterHorizontally,
                                    verticalArrangement = Arrangement.Center
                                ) {
                                    //新增账户
                                    Button(onClick = {
                                        navigationToTopLevelDestination(ADD_ACOUNT_DEST)

                                        scope.launch {
                                            sheetState.hide()
                                        }.invokeOnCompletion {
                                            //完成之后调用
                                            if (!sheetState.isVisible) {
                                                isShowBottomSheet.value = false
                                            }
                                        }
                                    }) {
                                        Icon(
                                            imageVector = Icons.Filled.AccountBox,
                                            contentDescription = "add new account"
                                        )
                                        Text(text = stringResource(R.string.addAcount))
                                    }

                                    //计划金额
                                    Button(onClick = {
                                        navigationToTopLevelDestination(PALN_MONEY_DEST)

                                        scope.launch {
                                            sheetState.hide()
                                        }.invokeOnCompletion {
                                            //完成之后调用
                                            if (!sheetState.isVisible) {
                                                isShowBottomSheet.value = false
                                            }
                                        }
                                    }) {
                                        Icon(
                                            imageVector = Icons.Default.Face,
                                            contentDescription = "plan Amount"
                                        )
                                        Text(text = stringResource(R.string.planAmount))
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    )
}